<html>
  <head>
  <script src="../../lib/js/jquery-1.2.6.js" type="text/javascript" language="javascript" charset="utf-8"></script>
  <script src="../../lib/js/jquery.bgiframe.js" type="text/javascript" language="javascript" charset="utf-8"></script>
  <script src="../../lib/js/jquery.ajaxQueue.js" type="text/javascript" language="javascript" charset="utf-8"></script>
  <script src="../../lib/js/jquery.dimensions.js" type="text/javascript" language="javascript" charset="utf-8"></script>
  <script src="../../lib/js/jqModal.js" type="text/javascript" language="javascript" charset="utf-8"></script>
  <script src="../../lib/js/jquery.autocomplete.js" type="text/javascript" language="javascript" charset="utf-8"></script>
  <script src="../../lib/js/jquery.template.js"  type="text/javascript" language="javascript" charset="utf-8"></script>

  <link rel="stylesheet" href="../../lib/js/jqModal.css" type="text/css" media="screen" title="no title" charset="utf-8" />
  <link rel="stylesheet" href="../../lib/js/jquery.autocomplete.css" type="text/css" media="screen" title="no title" charset="utf-8" />

  <script type="text/javascript" language="javascript">
  <!--
  $().ready(function(){
    $('#autocomplete').jqm({
      trigger : $('#show'),
      overlay : 40,
    });

    $('#picklistArea').jqm({
      overlay:50,
      trigger:false,
      zIndex:6000,
      modal : true
    });

    make_autocomplete_helper(jQuery, "inputBox", 'data');
    make_picklist_helper(jQuery, 'inputBox', 'picklistId', ['name', 'roll']);
  });

  var make_autocomplete_helper = function($, id, auto_complete_url) {

    var swap = function(o1, o2) {
      $(o1).show();
      $(o2).hide();
    }

    var swap_on_key = function(keycode, o1, o2) {
      return function(e) {
        if(e.which == 47){
          swap(o1, o2);
          /* Autocomplete has ruined the default select.
             And replace is a cheap trick to remove the hash */
          document.getElementById(o1.replace('#', '')).select();
          return false;
        }
        return true;
      }
    }

    var pid = '__ph__ac__' + id;
    var hid = '#' + id;
    var hpid = '#' + pid;

    $(hid) /* With our main text box */
      /* insert a helper text box */
      .after("<input type='text' class='something' id='" + pid + "' />")
      /* add a short cut to alternate the boxes  */
      .keypress(swap_on_key(47, hpid, hid));

    $(hpid)
      /* autocomplete this guy */
      .autocomplete(auto_complete_url)
      .blur(function(e) {
        swap(hid, this);
      })
      .keypress(swap_on_key(47, hid, hpid))
      /* immediately hide */
      .hide();

    /* to format the result into the main input ... */
    $(hpid).result(function(event, data, formatted) {
      $(hid).val(data);
    });
  }




  var make_picklist_helper = function($, id, internal_id, params){
    var hid = '#' + id;
    var _p = '__pl__srch'
    var pfx = _p + id;
    var hpfx = '#' + pfx;

    var picklistBoxHtml = '<label for="${pfx}_search_str"> Search for :</label>' +
      '<div>' +
      '<input type="text"   id="${pfx}_srch_str" />' +
      '<input type="submit" id="${pfx}_sbmt_btn" value="Find"/>' +
      '</div>' +
      '<div>' +
      '<input type="submit" id="${pfx}_prev_btn" value="Next"/>' +
      '<input type="submit" id="${pfx}_next_btn" value="Prev"/>' +
      '</div>' +
      '<div id="${pfx}_srch_rslts" />' +
      '<a href="#" class="jqmClose">close</div>'
      ;

    $(hid)
      .keypress(function(e){
        if(e.which == 63){
          $('#picklistArea')
            .html('')
            .append(jQuery.template(picklistBoxHtml), { pfx : _p})
            .jqmShow();
          $(hpfx + '_srch_str').focus();
          return false;
        }
      });
  }
  -->
  </script>
  </head>
  <body>
    <a href="#" id="show">Show</a>
    <div id="autocomplete" class="jqmWindow">
      <label for="inputBox">Type here :</label>
      <input type="text" id="inputBox" style="background-color:yellow" />
      <input type="submit" id="boo" />
      <a id="close" class="jqmClose" style="float:right" href="#">close</a>
    </div>
    <div id="picklistArea" class="jqmWindow"></div>
  </body>
</html>
